<template>
  <div class="hotSearch">
    <div class="hotlist">
      <p>热门搜索:</p>
      <ul>
        <li v-for="(item,index) in hotSearchList" :key="index" @click="$emit('serach',item.first)" >{{item.first}}</li>
      </ul> 
    </div>   
  </div>
</template>
<script>
export default {
  data(){
    return{
      hotSearchList:[]
    }
  },
  created(){
     // 热搜
    // /search/hot
    // /hot.json
    this.$http.get('/search/hot').then(d=>{
      this.hotSearchList = d.data.result.hots
    }).catch(err=>{
      console.log(err);
    })
  },
  methods:{

  }
}
</script>
<style lang="less" scoped>
.hotSearch{
  .hotlist{
      padding: 15px 10px 0;
      p{
        font-size: 12px;
        line-height: 12px;
        color: #666;
      }
  ul{
    margin: 10px 0px 7px;
    li{
      display: inline-block;
      height: 32px;
      margin-right: 8px;
      margin-bottom: 8px;
      padding: 0 14px;
      font-size: 13px;
      line-height: 32px;
      color: #333;
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 18px
    }
  }
  }
  
}
</style>